<template>
  <div class="planOrderReportDetail-pack">
    <ele-page
      v-loading="loading"
      :formConfig="searchConfig"
      ref="eleTable"
      :operateList="operateList"
      @handleOperateEvent="handleOperateEvent"
      :column="columnArray"
      :otherParams="otherParams"
      :initForm="initForm"
      :transFormdata="transFormdata"
      :getList="getList"
      @handleReset="handleReset"
      uniqueId="planOrderReportTable"
    >
      <div>
        <product-analysis :analysisData="analysisData" />
        <div class="table-top flex">
          <div class="title">
            <div class="icon"></div>
            <p>
              {{ $i18n.t("abnormalProcessAnalysis.processExceptionDetails") }}
            </p>
          </div>
          <div class="flex checkbox">
            <label for="">
              {{ $i18n.t("abnormalProcessAnalysis.summaryMethod") }}:
            </label>
            <el-checkbox-group v-model="checkList" @change="changeChek">
              <el-checkbox label="0">
                {{ $i18n.t("abnormalProcessAnalysis.orderGoods") }}
              </el-checkbox>
              <el-checkbox label="1">
                {{ $i18n.t("abnormalProcessAnalysis.workOrder") }}
              </el-checkbox>
              <el-checkbox label="2">
                {{ $i18n.t("abnormalProcessAnalysis.workshop") }}
              </el-checkbox>
              <el-checkbox label="3">
                {{ $i18n.t("abnormalProcessAnalysis.lineBody") }}
              </el-checkbox>
              <el-checkbox label="4">
                {{ $i18n.t("abnormalProcessAnalysis.teamsGroups") }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </ele-page>
  </div>
</template>

<script>
import { operateList, searchConfig } from "./config";
import productAnalysis from "./components/product-analysis.vue";
import { popover } from "@/utils/judge";
import {
  getProcessExceptionAnalysis as getList,
  getOrderStatusList,
  getYesOrNot,
  getProcessExceptionAnalysisCollect,
  getProdOrderTypeList,
} from "@/api/report/mesProdOrderPlanPassRatio";
import uploadNoAuto from "@/components/upload-no-auto";
import moment from "moment";
export default {
  name: "planOrderReport",
  components: {
    uploadNoAuto,
    productAnalysis,
  },
  mixins: [searchConfig],
  data() {
    return {
      title: null,
      otherParams: {},
      visible: false,
      initForm: {},
      checkList: [],
      isLoading: false,
      loading: false,
      analysisData: {},
      statusList: [],
      formDataDialog: {},
      // searchConfig,
      operateList,
      getList,
      isLoadingImport: false, // 导入数据loading
      importData: {}, //导入数据
      importVisible: false,
      columnArray: [],
      // 列表页字段的绑定配置
      column: [
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        {
          prop: "processCode",
          label: $i18n.t("abnormalProcessAnalysis.processCode"), //"工序编码"
          minWidth: 140,
          fixed: "left",
          showOverflowTooltip: true,
          render: (h, { row }) => {
            return popover(row.processCode, h, "", () =>
              this.goworkDetails(row)
            );
          },
        },
        {  minWidth: 180,
          prop: "processName",
          label: $i18n.t("abnormalProcessAnalysis.processName"), // //工序名称
          fixed: "left",
          showOverflowTooltip: true,
        },
        {
          prop: "prodCode",
          label: $i18n.t("abnormalProcessAnalysis.prodCode"), // //产品编码
          // minWidth: 120,
          // showOverflowTooltip: true,
        },
        {
          prop: "prodName",
          label: $i18n.t("abnormalProcessAnalysis.prodName"), //产品名称
          // minWidth: 120,
          showOverflowTooltip: true,
        },
        // {
        //   prop: "orderCode",
        //   label: $i18n.t("abnormalProcessAnalysis.orderCode"), //"生产订单编号",
        //   minWidth: 200,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "actualQty",
          label: $i18n.t("abnormalProcessAnalysis.actualQty"), //"实际数量",
          width: 90,
          showOverflowTooltip: true,
        },
        {
          prop: "unqualifiedQty",
          label: $i18n.t("abnormalProcessAnalysis.unqualifiedQty"), // "不良数量",
          width: 80,
          showOverflowTooltip: true,
        },
        {
          prop: "scrapQty",
          label: $i18n.t("abnormalProcessAnalysis.scrapQty"), // "报废数量",
          width: 80,
          showOverflowTooltip: true,
        },
        {
          prop: "scrapRatio",
          label: $i18n.t("abnormalProcessAnalysis.scrapRatio"), // "废品率",
          width: 80,
          showOverflowTooltip: true,
          render: (h, { row }) => {
            return <p>{row.scrapRatio || 0} %</p>;
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    // 跳转工单详情
    goworkDetails(row) {
      let form = this.$refs.eleTable.getSearchParams();
      let {
        planCode,
        orderCode,
        workshopCode,
        lineCode,
        workTeamCode,
        processName,
        processCode,
      } = row;
      let obj = {
        productProcessCode: processCode,
        productProcessName: processName,
      };
      if (this.checkList.includes("0")) {
        obj.planCode = planCode;
      }
      if (this.checkList.includes("1")) {
        obj.orderCode = orderCode;
      }
      if (this.checkList.includes("2")) {
        obj.workshopCode = workshopCode;
      }
      if (this.checkList.includes("3")) {
        obj.lineCode = lineCode;
      }
      if (this.checkList.includes("4")) {
        obj.workTeamCode = workTeamCode;
      }

      let data = JSON.stringify({
        ...form,
        date1: [form.searchStartTime, form.searchEndTime],
        ...obj,
      });
      this.$router.push({
        path: "/report/mesProcessExceptionDetails",
        query: {
          str: data,
          // ...form,
          // date1: [form.searchStartTime, form.searchEndTime],
          // // beginDate: form.actualEndDateMin,
          // // endDate: form.actualEndDateMax,
          // ...obj,
        },
      });
    },

    async setEchartsData() {
      let form = this.$refs.eleTable.getSearchParams();
      let res = await getProcessExceptionAnalysisCollect(form);
      let {
        scrapRatio,
        actualQty,
        scrapQty,
        scrapDifferenceQty,
        completeRatio,
        unqualifiedQty,
        completeQty,
        completeDifferenceQty,
      } = res.data.result;
      // 复制饼图组件
      this.analysisData = {
        openRatio: scrapRatio,
        planOpenNum: actualQty,
        actualOpenNum: scrapQty,
        openLackNum: scrapDifferenceQty,
        // 第二个饼图
        endRatio: completeRatio,
        planEndNum: unqualifiedQty,
        actualEndNum: completeQty,
        endLackNum: completeDifferenceQty,
      };
    },
    async transFormdata(data) {
      let { records, total } = data.data.result;
      {
        /* 上方卡片统计 */
      }
      this.setEchartsData();
      return { records, total };
    },
    async getStatusList() {
      const list = await getOrderStatusList();
      this.statusList = list.data.result;
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name;
      const fnc = {};
      {
        /* fnc[data.handleName](); */
      }
    },
    //刷新表格数据
    refresh(isReset = true) {
      // this.$refs.eleTable.refresh(isReset)
      this.initParams();
    },
    initParams() {
      let timer1 = moment().format("YYYY-MM-DD 00:00:00");
      let timer2 =moment().format("YYYY-MM-DD HH:mm:ss");
      this.initForm = { searchTimeType: "1", actualEndDate: [timer1, timer2] };
      this.checkList = [];
      this.otherParams = {};
    },
    handleReset() {
      this.refresh();
    },
    // 汇总方法change
    changeChek() {
      let arr = [];
      this.checkList.map((ite) => {
        switch (ite) {
          case "0":
            arr.push({
              prop: "planCode",
              label: $i18n.t("abnormalProcessAnalysis.planCode"), // "订单编码",
              minWidth: 190,
              showOverflowTooltip: true,
            });
            break;
          case "1":
            arr.push({
              prop: "orderCode",
              label: $i18n.t("abnormalProcessAnalysis.orderCode"), // "工单编码",
              minWidth: 200,
              showOverflowTooltip: true,
            });
            break;
          case "2":
            arr.push({
              prop: "workshopCode",
              label: $i18n.t("abnormalProcessAnalysis.workshopCode"), // "车间编码",
              showOverflowTooltip: true,
              minWidth: 120,
            });
            arr.push({
              prop: "workshopName",
              label: $i18n.t("abnormalProcessAnalysis.workshopName"), //  "车间名称",
              showOverflowTooltip: true,
              minWidth: 120,
            });
            break;
          case "3":
            arr.push({
              prop: "lineCode",
              label: $i18n.t("abnormalProcessAnalysis.lineCode"), //  "线体编码",
              showOverflowTooltip: true,
              minWidth: 120,
            });
            arr.push({
              prop: "lineName",
              label: $i18n.t("abnormalProcessAnalysis.lineName"), //  "线体名称",
              showOverflowTooltip: true,
              minWidth: 120,
            });
            break;
          case "4":
            arr.push({
              prop: "workTeamCode",
              label: $i18n.t("abnormalProcessAnalysis.workTeamCode"), //  "班组编码",
              showOverflowTooltip: true,
              minWidth: 120,
            });
            arr.push({
              prop: "workTeamName",
              label: $i18n.t("abnormalProcessAnalysis.workTeamName"), //  "班组名称",
              showOverflowTooltip: true,
              minWidth: 120,
            });
            break;
          default:
            break;
        }
      });
      this.columnArray = [
        ...this.column.slice(0, 3),
        ...arr,
        ...this.column.slice(3, 30),
      ];
      this.otherParams["searchTypes"] = this.checkList.join();
      this.$refs.eleTable.refresh(false);
    },
  },
  created() {
    console.log(11111, [...this.column]);
    this.columnArray = [...this.column];
    this.getStatusList();
    this.initParams();
  },
  activated() {
    this.getStatusList();
  },
};
</script>
<style lang="scss" scoped>
.planOrderReportDetail-pack {
  /deep/.operateList {
    justify-content: flex-end;
    float: right;
  }
  /deep/.operateIcon {
    flex: 0;
  }

  .checkbox {
    & > label {
      margin-left: 30px;
      margin-right: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #5a6f82;
    }
  }
  .table-top {
    position: relative;
    top: 30px;
  }
  .title {
    display: flex;
    align-items: center;
    .icon {
      width: 5px;
      height: 20px;
      background: #00b39b;
      margin-right: 10px;
    }
    p {
      font-size: 16px;
      font-weight: 700;
      color: #333333;
    }
  }

  .card {
    padding-bottom: 10px;
    .card-item {
      text-align: center;

      .label {
        color: #5a6f82;
        font-size: 14px;
      }
      .value {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
      }
    }
  }
  .flex {
    display: flex;
  }
}
</style>
